<template>
  <div>
    
    <van-checkbox-group v-model="result">
      <h5>分类</h5>
      <template v-for="item in options">
        <van-checkbox :name="item.id">{{ item.name }}</van-checkbox>
      </template>
      <h5>分类2</h5>
      <template v-for="item in options2">
        <van-checkbox :name="item.id">{{ item.name }}</van-checkbox>
      </template>
    </van-checkbox-group>

    <van-button @click="clickFilter">测试复选框筛选弹窗</van-button><br/>
    <!-- <span>本页面未call 'navBack'</span>
    <span>本页面call 'navRight' : {{ navRight }}</span> -->
    <van-button @click="popupVisible = true">打开弹窗</van-button><br/>
    <van-popup v-model="popupVisible" position="top">
      <!-- <side-choose v-if="popupVisible" ref="sideChoose" :items.sync="items" :default.sync="current" maxHeight="28vh" @changed="(e) => {tempChoosed = e}"></side-choose> -->
      <van-button @click="popupVisible = false;">取消</van-button>
      <van-button @click="resetCurrent">确定</van-button><br/>
      <span v-if="popupVisible">当前选中: </span>
      <span>{{ tempChoosed }}</span>
    </van-popup>
    <van-button @click="goToDetail">进入GoJS </van-button>
    <!-- <van-button @click="current = [333,141]">外部变化选中为(333,141)</van-button><br/> -->
    {{ current }}<br/>
    <!-- <van-button @click="changeRightTitle">变化文本</van-button> -->
    <time-choose
      :start="start"
      :end="end"
       height="300px"
      :show.sync="datePickerVisible"
      @change="timeChange">
      <div slot="header">
        我是插槽 <br>
        我是插槽<br>
        我是插槽<br>
        我是插槽<br>
        我是插槽
      </div>
    </time-choose>
    <van-button icon="arrow-left" @click="backToSchedule">返回日程</van-button>
    {{ start }} - {{ end }}
    <van-button @click="showPreviewBridge">调用Bridge 文件预览</van-button>
    <van-button @click="datePickerVisible = true">外部触发 时间选择开关</van-button>
    <van-button @click="showWord('http://cms.yuyankeji.cn/123.docx')">外部触发 文档预览开关</van-button>
    <van-button @click="showWord('http://cms.yuyankeji.cn/%E5%88%86%E5%8F%91.docx')">外部触发 文档预览开关2</van-button>
    <van-button @click="fileUrl = ''">外部触发 关闭文档预览</van-button>
    <!-- <van-button @click="$router.push({name: 'meetingDetail' , query: {id: '1'}})"></van-button> -->
    <!-- <van-button @click="$router.push({name: 'test2'})">进入子页面 test2</van-button> -->

    <!-- 筛选弹出框 -->
    <van-popup v-model="filtratePopup" round lock-scroll position="bottom" class="filtrete-pop">
      <van-nav-bar title="筛选" class="filtrate-title"/>
      <div class="filtrate-content">
        <van-checkbox-group v-model="filtrateResult" @change="onclick" checked-color="#1989fa">
          <div v-for="(item,index) in filtrateTree" :key="index" v-if="item.son.length > 0">
            <p class="filtrate-content-title">{{item.typename}}</p>
            <van-row>
              <van-col span="11" v-for="(son, sindex) in item.son" :key="sindex+'son'" :offset="sindex%2==1?'2':''">
                <van-checkbox :ref="`filtrateItem${index}${sindex}`" class="filtrate-choose" 
                :name="son.tplid">{{son.title}}</van-checkbox>
              </van-col>
            </van-row>
          </div>
        </van-checkbox-group>
      </div>
      <van-row type="flex" justify="space-between" class="filtrate-button">
        <van-col span="12">
          <div class="default-class" @click="filtrateCancel">重 置</div>
        </van-col>
        <van-col span="12">
          <div class="info-class" @click="filtrateChose">确 定</div>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>


<script>
// @ is an alias to /src
import timeChoose from '@/components/TimeChoose.vue'

import sideChoose from '@/components/SideChoose.vue'
export default {
  components: {
    'time-choose': timeChoose,
    'side-choose': sideChoose
  },
  data () {
    return {
      result: [],
      options: [
        {id: 1, name: 1}, {id: 2, name: 2}, {id: 3, name: 3}
      ],
      options2: [
        {id: 111, name: 111}, {id: 222, name: 222}, {id: 333, name: 333}
      ],
      current: [],
      popupVisible: false,
      tempChoosed: [],

      start: '',
      end: '',
      datePickerVisible: false,
      fileUrl: '',
      navRight: '默认',
      items: [],

      filtrateTree: [],
      filtratePopup: false, //筛选弹出框控制器
      filtrateResult: [],
    }
  },
  activated() {
    this.$bridge.callHandler('navTitle', {title: this.navRight})
    this.$bridge.registerHandler('navRightClicked',  (data, responseCallback)  => {
      alert(123)
      responseCallback('h5 done!')
    })
    setTimeout(_ => {
      this.items = [
          {
            // 导航名称
            text: '所有城市',
            // 导航名称右上角徽标
            info: 3,
            // 是否在导航名称右上角显示小红点
            dot: true,
            // 导航节点额外类名
            className: 'my-class',
            // 该导航下所有的可选项
            children: [
              {
                // 名称
                text: '温州111',
                // id，作为匹配选中状态的标识符
                id: 111,
                // 禁用选项
                choosed: false
              },
              {
                text: '杭州121',
                id: 121,
                choosed: false
              },
              {
                text: '杭州131',
                id: 131,
                choosed: false
              },
              {
                text: '杭州141',
                id: 141,
                choosed: false
              },
              {
                text: '杭州151',
                id: 151,
                choosed: false
              },
              {
                text: '杭州161',
                id: 161,
                choosed: false
              },
              {
                text: '杭州171',
                id: 171,
                choosed: false
              }
            ]
          },
          {
            // 导航名称
            text: '所有城市',
            // 导航名称右上角徽标
            info: 3,
            // 是否在导航名称右上角显示小红点
            dot: true,
            // 导航节点额外类名
            className: 'my-class',
            // 该导航下所有的可选项
            children: [
              {
                // 名称
                text: '温州222',
                // id，作为匹配选中状态的标识符
                id: 222,
                // 禁用选项
                disabled: true,
                choosed: false
              },
              {
                text: '杭州333',
                id: 333,
                choosed: false
              },
              {
                text: '杭州444',
                id: 444,
                choosed: false
              },
              {
                text: '杭州555',
                id: 555,
                choosed: false
              }
            ]
          }
        ]
    }, 1000)
  },
  mounted() {
    window.test = this
    this.$bridge.callHandler('navRight', {title: this.navRight})
  },
  methods: {
    returnCheck() {
      // let self = this
      // self.options.forEach((item, index) => {
      //   if(self.$refs['checkbox'+index].checked) {
      //     self.$refs['checkbox'+index].$el.classList.add('checked')
      //   } else {
      //     self.$refs['checkbox'+index].$el.classList.remove('checked')
      //   }
      // })
      // console.log(self.result)
      return true
    },
    goToDetail() {
      // this.$bridge.callHandler('nextPage')
      `${window.location.origin}/h5/#/gojsChart?isnew=new&id=${this.$route.query.tplid}&type=2&userid=${this.$store.state.userId}&token=${this.$store.state.token}`
      this.$router.push({name: 'gojsChart', query: {type: 2, userid: 131, id: 490}})
    },
    resetChoosed() {

    },
    resetCurrent() {
      this.current = this.$refs.sideChoose.getChoosed()
      this.popupVisible = false
    },
    changeRightTitle() {
      this.navRight == '默认' ? this.navRight == '改回去' : this.navRight == '默认'
      this.$bridge.callHandler('navRight', {title: this.navRight})
    },
    timeChange(e) {
      this.start = e.start
      this.end = e.end
    },
    showWord(url) {
      this.fileUrl = encodeURI(url)
    },
    /**
     * 返回至原生日程界面
     * @return {[type]} [description]
     */
    backToSchedule() {
      this.$bridge.callHandler('backToSchedule', {}, (data) => {
        console.log("已调用 backToSchedule 方法")
      })
    },
    /**
     * 调用原生进行文件预览
     * @return {[type]} [description]
     */
    showPreviewBridge() {
      this.$bridge.callHandler('testBridge')
      this.$bridge.callHandler('testBridgeWithObj', {
        name: "这是固定的文件名.xxx",
        url: 'http://cms.yuyankeji.cn/%E5%88%86%E5%8F%91.docx',
        type: '1'
      })
      this.$bridge.callHandler('showPreview', {
        name: "这是固定的文件名.xxx",
        url: 'http://cms.yuyankeji.cn/%E5%88%86%E5%8F%91.docx',
        type: '1'
      }, () => {
        console.log('showPreview事件调用完成')
      })
    },
    /**
     * 点开复选框弹窗
     * @return {[type]} [description]
     */
    clickFilter() {
      this.getFiltrateData()
      this.filtratePopup = true
    },
    /*
      * 获取筛选数据
     */
    getFiltrateData() {
      let config = {
        method: "post",
        url: `${this.$common.basePath}workclass.php`,
        data: {
          do: "workaddlist",
          user_id: this.$store.state.userId
        }
      }
      this.$axios(config).then(res => {
        this.filtrateTree = res.data
      }).catch(err => {
        this.$toast(err.msg)
      })
    },
    /**
     * 复选框组点击事件
     * @return {[type]} [description]
     */
    onclick() {
      console.log(this.filtrateResult)
    },
    /**
     * 筛选确认
     * @return {[type]} [description]
     */
    filtrateChose() {

    },
    /**
     * 筛选取消
     * @return {[type]} [description]
     */
    filtrateCancel() {

    },
  }
}
</script>

<style type="text/css">
  .checked {
    background: red!important;
  }
  .van-checkbox {
    display: inline-block;
    padding: 10px;
    margin: 0 10px;
    width: calc(50% - 39.99px);
  }
  .van-checkbox[aria-checked="true"] {
    background-color: #c0dbf2;
  }
  .van-checkbox .van-checkbox__icon {
    display: none;
  }
</style>

